<template>
    <div class="name-generator">
      <h1>智能姓名生成器</h1>
      
      <div class="input-section">
        <div class="input-group">
          <input 
            v-model="surname" 
            type="text" 
            placeholder="请输入姓氏"
            class="surname-input"
            @keyup.enter="handleGenerate"
          >
          <div class="gender-select">
            <label>
              <input type="radio" v-model="gender" value="male"> 
              <i class="fa fa-mars"></i> 男
            </label>
            <label>
              <input type="radio" v-model="gender" value="female">
              <i class="fa fa-venus"></i> 女
            </label>
          </div>
        </div>
        <button @click="handleGenerate" class="generate-btn">
          <i class="fa fa-magic"></i> 生成名字
        </button>
      </div>
  
      <div v-if="generatedNames.length" class="result-section">
        <h2>推荐名字</h2>
        <div class="names-grid">
          <NameCard
            v-for="(name, index) in generatedNames"
            :key="index"
            :surname="surname"
            :name="name"
            :rank="name.rank"
            @toggle-favorite="toggleFavorite(index)"
          />
        </div>
      </div>
  
      <FavoriteList
        :favorites="favorites"
        @remove="removeFavorite"
      />
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue'
  import NameCard from './NameCard.vue'
  import FavoriteList from './FavoriteList.vue'
  import { useNameGeneration } from '../composables/useNameGeneration'
  
  export default {
    name: 'NameGenerator',
    components: {
      NameCard,
      FavoriteList
    },
    
    setup() {
      const surname = ref('')
      const gender = ref('male')
      const { 
        generatedNames, 
        favorites, 
        generateNames, 
        loadFavorites,
        addToFavorites,
        removeFromFavorites 
      } = useNameGeneration()
  
      const handleGenerate = () => {
        if (!surname.value.trim()) {
          alert('请输入姓氏')
          return
        }
        generatedNames.value = generateNames(surname.value, gender.value)
      }
  
      // 处理收藏
      const toggleFavorite = (index) => {
        const name = generatedNames.value[index]
        name.isFavorite = !name.isFavorite
        
        if (name.isFavorite) {
          addToFavorites({
            fullName: surname.value + name.characters,
            meaning: name.meaning,
            source: name.source,
            characters: name.characters
          })
        } else {
          // 如果取消收藏，找到并移除
          const favoriteIndex = favorites.value.findIndex(
            f => f.fullName === surname.value + name.characters
          )
          if (favoriteIndex !== -1) {
            removeFromFavorites(favoriteIndex)
          }
        }
      }
  
      // 处理移除收藏
      const removeFavorite = (index) => {
        const removedName = favorites.value[index]
        removeFromFavorites(index)
        
        // 同步更新生成名字列表中的收藏状态
        const generatedIndex = generatedNames.value.findIndex(
          n => surname.value + n.characters === removedName.fullName
        )
        if (generatedIndex !== -1) {
          generatedNames.value[generatedIndex].isFavorite = false
        }
      }
  
      onMounted(() => {
        loadFavorites()
      })
  
      return {
        surname,
        gender,
        generatedNames,
        favorites,
        handleGenerate,
        toggleFavorite,
        removeFavorite
      }
    }
  }
  </script>
  
  <style>
  /* 导入变量和基础样式 */
  @import '../styles/variables.css';
  @import '../styles/main.css';
  
  /* 组件特定样式 */
  .name-generator {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    margin-bottom: var(--spacing-lg);
  }
  
  .input-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
  }
  
  .input-group {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
  }
  
  .surname-input {
    width: 100%;
    max-width: 200px;
    padding: var(--spacing-md);
    font-size: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
  }
  
  .gender-select {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
  }
  
  .gender-select label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-light);
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .gender-select label:hover {
    background-color: var(--bg-hover);
  }
  
  .generate-btn {
    width: 100%;
    max-width: 200px;
    padding: var(--spacing-md);
    font-size: 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .generate-btn:hover {
    background-color: var(--primary-hover);
  }
  
  .names-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
  }
  
  /* 移动端适配 */
  @media (max-width: 768px) {
    .name-generator {
      padding: var(--spacing-md);
    }
  
    .input-group {
      flex-direction: column;
      align-items: center;
    }
  
    .surname-input {
      width: 100%;
    }
  
    .gender-select {
      width: 100%;
      justify-content: center;
    }
  
    .generate-btn {
      width: 100%;
    }
  
    .names-grid {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }
  }
  
  /* 暗色模式支持 */
  @media (prefers-color-scheme: dark) {
    .name-generator {
      background-color: var(--bg-dark);
      color: var(--text-light);
    }
  }
  </style>